<template>
    <div class="intro-list">
        <HeadTitle></HeadTitle>
        <Row :gutter="32" className="center-row">
            <i-col span="2">
                <Button size="large" type="primary" icon="chevron-left" long @click="toHome"></Button>
            </i-col>
        </Row>
        <Row class="button-line icon" :gutter="64">
            <i-col span="8" class="cell" @click.native="toSchool">
                <div class="school">
                    <Icon type="ios-bookmarks" size="200"></Icon>
                </div>
            </i-col>
            <i-col span="8" class="cell" @click.native="toViewings">
                <div class="viewing">
                    <Icon type="ios-monitor" size="200"></Icon>
                </div>
            </i-col>
            <i-col span="8" class="cell" @click.native="toLeaders">
                <div class="leader">
                    <Icon type="ios-person" size="200"></Icon>
                </div>
            </i-col>
        </Row>
        <Row class="button-line text" :gutter="64">
            <i-col span="8" class="cell">
                <h2>教学点介绍</h2>
            </i-col>
            <i-col span="8" class="cell">
                <h2>精品收视点介绍</h2>
            </i-col>
            <i-col span="8" class="cell">
                <h2>校领导介绍</h2>
            </i-col>
        </Row>
    </div>
</template>

<script>
    import HeadTitle from "./component/HeadTitle.vue";

    export default {
        name: "intro-list",
        components: {
            HeadTitle
        },
        methods: {
            toHome() {
                this.$router.push("/");
            },
            toSchool() {
                this.$router.push("/school");
            },
            toViewings() {
                this.$router.push("/viewing");
            },
            toLeaders() {
                this.$router.push("/leader");
            }
        }
    }
</script>

<style lang="less" scoped>
    .intro-list {
        margin: 10px 100px;
        .button-line {
            text-align: center;
        }
        .icon {
            font-size: 200px;
            line-height: 400px;
            cursor: pointer;
            .cell {
                padding: 16px;
                .school {
                    background-color: #638c0b;
                }
                .viewing {
                    background-color: #ac6a00;
                }
                .leader {
                    background-color: #0075a9;
                }
            }
        }
    }
</style>